<template>
    <div>
        <el-form :inline="true" :model="student" class="demo-form-inline">
            <el-form-item label="学生编号">
                <el-input placeholder="请输入学号" v-model="student.student_id" clearable></el-input>
            </el-form-item>
            <el-form-item label="学生姓名">
                <el-input placeholder="请输入姓名" v-model="student.student_name" clearable></el-input>
            </el-form-item>
            <el-form-item label="学生性别">
                <el-radio-group v-model="student.student_sex">
                    <el-radio-button label="1">男</el-radio-button>
                    <el-radio-button label="2">女</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <br />
            <el-form-item label="所在城市">
                <el-input placeholder="请输入城市" v-model="student.city" clearable></el-input>
            </el-form-item>
            <el-form-item label="入学时间">
                <el-input placeholder="请输入入学时间" v-model="student.enter_date" clearable></el-input>
            </el-form-item>
            <el-form-item label="学生班级">
                <el-select v-model="student.class_id" placeholder="请选择班级">
                    <el-option v-for="c in classData" :key="c" :label="c" :value="c"></el-option>
                </el-select>
            </el-form-item>
            <br />
            <el-form-item>
                <el-button type="primary" @click="stuQuery">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="warning" @click="toReset">重置</el-button>
            </el-form-item>
        </el-form>
        <table style="width: 100%; border: none; margin-top: 30px;" cellspacing="0">
            <tr style="font-weight: 800;">
                <td>学号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>城市</td>
                <td>入学日期</td>
                <td>班级</td>
                <td>
                    <el-button type="info" disabled>操作</el-button>
                    <el-button type="success" @click="stuAdd()">新增</el-button>
                </td>
            </tr>
            <tr v-for="stu in getStudentMsg" :key="stu.student_id">
                <td>{{ stu.student_id }}</td>
                <td>{{ stu.student_name }}</td>
                <td>
                    <span v-if="stu.student_sex==1">男</span>
                    <span v-if="stu.student_sex==2">女</span>
                </td>
                <td>{{ stu.city }}</td>
                <td>{{ stu.enter_date }}</td>
                <td>{{ stu.class_id }}</td>
                <td>
                    <el-button type="primary" @click="stuUpdate(stu.student_id)">修改</el-button>
                    <el-button type="danger" @click="delConfirm(stu.student_id)">删除</el-button>
                </td>
            </tr>
        </table>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name:"StudentQuery",
        data() {
            return {
                student: {
                    student_id:"",
                    student_name:"",
                    student_sex:"",
                    city:"",
                    enter_date:"",
                    class_id:"",
                },
                classData:[],
                getStudentMsg: [],
            }
        },
        created() {
            this.stuQuery();
            this.getData();
        },
        methods: {
            getData() {
                this.$axios({
                    methods:'get',
                    url:'http://localhost:8081/workbench/student/getData',
                }).then(res=>{
                    this.classData=res.data.data[0];
                }).catch(err=>{
                    console.log(err);
                })
            },
            stuQuery() {
                this.$axios({
                    methods:'get',
                    url:'http://localhost:8081/workbench/student/findStudentPart',
                    params:this.student
                }).then(res=>{
                    this.getStudentMsg=res.data.data;
                }).catch(err=>{
                    console.log(err);
                })
            },
            delConfirm(student_id) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                this.stuDel(student_id);
                this.$message({ 
                    type: 'success',
                    message: '删除成功!'
                });
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
                });
            },
            stuDel(student_id) {
                this.$axios({
                    methods:'get',
                    url:'http://localhost:8081/workbench/student/removeStudentById',
                    params: {
                        student_id:student_id
                    }
                }).then(res=>{
                    this.stuQuery();
                }).catch(err=>{
                    console.log(err);
                })
            },
            toReset() {
                this.student.student_id="";
                this.student.student_name="";
                this.student.student_sex="";
                this.student.city="";
                this.student.enter_date="";
                this.student.class_id="";
                this.stuQuery();
            },
            stuUpdate(student_id) {
                this.$router.replace({
                    name:'updateStudent', 
                    params:{
                        student_id:student_id,
                    }
                })
            },
            stuAdd() {
                this.$router.replace({
                    name:'addStudent', 
                })
            }
        }
    }
</script>

<style>
    .el-input {
        margin-right: 0px !important;
    }
    .el-form-item {
        margin: 0 80px;
    }
    .cell {
        text-align: center !important;
    }
    tr {
        height: 60px;
        text-align: center;
    }
    tr:nth-child(odd) {
        background-color: #fff;
    }
    tr:nth-child(even) {
        background-color: #f2f2f2;
    }
    td {
        text-align: center;
    }
</style>